<template>
<div>
  <div class="banner">
   <img src="http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg" class="banner-img">
   <div class="banner-info">
    <div class="banner-title">
     大连圣亚海洋世界(AAAA景区)
    </div>
    <div class="banner-number">
     39
    </div>
   </div>
   </div>
   <common-gallary></common-gallary>
  </div>
</template>
<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
  name: 'DetailBanner',
  components: {
    CommonGallary
  }
}
</script>
<style lang="stylus" scoped>
 .banner
   overflow hidden
   position relative
   height 0
   padding-bottom 55%
   .banner-img
     width 100%
   .banner-info
     display flex
     position absolute
     left 0
     right 0
     bottom 0
     color #fff
     background-image linear-gradient(top,rgba(0, 0, 0, 0),rgba(0, 0, 0, .8))
     line-height .6rem
     .banner-title
       flex 1
       font-size .32rem
       padding 0 .2rem
     .banner-number
       padding  0 .4rem
       margin-top .14rem
       height .32rem
       font-size .24rem
       line-height .32rem
       border-radius .2rem
       background-color rgba(0,0,0,.8)
</style>
